<template>
	<view class="container">
		<swiper class="swiper"
		         :style="{width:banner_w,height:banner_h}"
		        :indicator-dots="true" :autoplay="true" :interval="5000" :duration="2000">
			<swiper-item v-for="(value,key) in banner" :key="key">
				<image mode="widthFix" class="swiper_image" :style="{width:banner_w}" :src="url+value"></image>
			</swiper-item>
		</swiper>
		
		<view class="merchant_unit">
			<view class="merchant_con" v-on:click="map_lbs">
				<view class="merchant_name">{{merchant[0].name}}</view>
				<view class="address"><image :src="static_url+'/addr.png'"></image>{{merchant[0].address}}</view>
				<view class="address"><image :src="static_url+'/time.png'"></image>{{merchant[0].business_hours}}</view>
			</view>
			<view class="merchant_tag">{{merchant[0].store_sort_name}}</view>
		</view>
		<view class="merchant" v-for="(value,index) in result" :key="index">
			<view class="coupon_unit" :id="value.coupon_id">
				<image mode="aspectFill" :style="{height:merchant_pic}" :src="url+value.coupon_imgurl"></image>
				<view class="coupon_con" :style="{height:merchant_pic}">
					<view class="coupon_title">{{value.coupon_name.substr(0,12)}}</view>
					<view class="coupon_number">已兑换数量<text>{{value.get_sum}}</text></view>
					<view class="coupon_integral">所需积分<text>{{value.exchange_price}}</text></view>
				</view>
				<view class="coupon_operate" :id="value.coupon_id" v-on:click="coupon_detail">兑换</view>
			</view>
		</view>
	</view>
</template>
<style>
	/******************/
	.merchant{width:94%;margin:20upx 3%;padding:10upx 0;border-radius: 20upx;background: #FFFFFF;}
	.merchant_unit{width:92%;display: flex;justify-content: space-between;align-items: flex-end;padding:10upx 4%;background: #FFFFFF;}
	.merchant_pic{width:20%;overflow: hidden;border-radius: 10upx;background: #24C3A4;}
	.merchant_con{width:70%;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;}
	.merchant_name{font-size: 36upx;color: #333333;font-weight: bold;line-height: 60upx;}
	.address{font-size: 28upx;color: #999999;display: flex;justify-content: flex-start;align-items: center;line-height: 40upx;}
	.address image{width:30upx;height: 30upx;margin-right: 20upx;}
	.merchant_tag{border:1px solid #E03636;color: #E03636;padding:5upx 20upx;border-radius: 10upx;font-size: 24upx;}
	.coupon_unit{width:94%;padding:10upx 3%;display: flex;justify-content: space-between;align-items: center;margin:10upx 0;
	/* background-image: linear-gradient(to right,#fff0ed, #ffdbc8); */}
	.coupon_unit image{width:20%;}
	.coupon_con{width:58%;padding-left:2%;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;}
	.coupon_title{font-size: 32upx;color: #333333;}
	.coupon_number{font-size: 28upx;color: #999999;}
	.coupon_number text{padding-left: 10upx;}
	.coupon_integral{font-size: 28upx;color: #999999;}
	.coupon_integral text{color: #E03636;padding-left: 10upx;font-size: 32upx;}
	.coupon_operate{width:18%;height: 60upx;line-height: 60upx;color: #FFFFFF;text-align: center;font-size: 28upx;
	background-image: linear-gradient(#43eac9, #24c3a4);border-radius: 30upx;}
	/******************/
	.swiper_imag{width:100%;border-radius: 20upx;overflow: hidden;}
	.swiper{background: #FFFFFF;overflow: hidden;margin:0 3%;border-radius: 20upx;overflow: hidden;}
	.top_fixed{height: 80upx;margin:0 3% 20upx 3%;width:94%;position: fixed;top:0;left:0;z-index: 999;}
	.sort{height: 80upx;margin:0 3% 20upx 3%;width:94%;}
	.nav{height: 80upx;background-color:#717171; display: flex;align-items: center;justify-content: flex-start;flex-wrap: nowrap;}
	.button{width: 280upx;height: 40upx;line-height: 40upx;  font-size: 28upx;text-align: center;color: #FFFFFF;border-right: 1px solid #FFFFFF;}
	.button:first-child{border:none !important;}
	.font-color{color: #FFFFFF;font-weight: bold;background: #f27e41;height: 80upx;line-height: 80upx;}
	/******************/
	page,.container{background: #f4f4f4;}
</style>
<script>
	export default {
		data() {
			return {
				id:0,
				name:'',
				pic_h:'',
				merchant_pic:'',
				banner_w:'',
				banner_h:'',
				result:[],
				merchant:[],
				banner:[],
				height:'',
				start:0,
				url: getApp().globalData.url,
				static_url:getApp().globalData.static
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			var w = res.windowWidth;
			this.banner_w = w*0.94+"px";
			this.banner_h = w*9/16+"px";
			this.merchant_pic = w*0.94*0.94*0.2+"px";
			this.height = res.windowHeight+"px";
			this.id = parseInt(e.id);
			console.log(this.id);
			// const scene = decodeURIComponent(e.scene);
			// var upid    = uni.getStorageSync("upid");
			// if(scene=="undefined"||scene==undefined)
			// {
			// 	if(upid=="" || upid==undefined || upid=="undefined")
			// 	{
			// 		if(e.upid==undefined)
			// 		{
			// 			uni.setStorageSync("upid",0);
			// 		}
			// 		else
			// 		{
			// 			uni.setStorageSync("upid",parseInt(e.upid));
			// 		}
			// 	}
			// }
			// else
			// {
			// 	uni.setStorageSync("upid",scene);
			// }
		},
		onShow(){
			this.initialize();
		},
		onReachBottom:function()
		{
			this.initialize();
		},
		methods: {
			map_lbs:function()
			{
				var c_latitude  = parseFloat(this.merchant[0].latitude);
				var c_longitude = parseFloat(this.merchant[0].longitude);
				var that = this;
				// wx.getLocation({
				//  type: 'gcj02', //返回可以用于wx.openLocation的经纬度
				//  success (res) {
				//    const latitude  = c_latitude;
				//    const longitude = c_longitude
				//    wx.openLocation({
				//      latitude,
				//      longitude,
				//      scale: 18
				//    })
				//  }
				// })
			},
			coupon_detail:function(e)
			{
				var id = e.currentTarget.id;
				uni.navigateTo({
					url:"coupon_detail?id="+id
				})
			},
			shop_home:function(e)
			{
				var id = e.currentTarget.id;
				uni.navigateTo({
					url:"home?id="+id
				})
			},
			input_:function(e)
			{
				if(e.currentTarget.dataset.name=="name")
				{
					this.name = e.target.value;
				}
			},
			search:function()
			{
				if(this.name=="")
				{
					uni.showToast({
						title:"不能为空",
						duration:2000
					})
				}
				else
				{
					uni.navigateTo({
						url:"/pages/mall/search?name="+this.name
					})
				}
			},
			initialize:function()
			{
				console.log("积分商户主页");
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				uni.request({
					url: this.url+"/wechat_shop_coupon",
					data: {store_id:this.id,start:this.start},
					header: {'Content-Type': 'application/json'},
					success: function (res) 
					{
						if(res.data.status==1)
						{
							that.start += 10;
							for(var i=0;i<res.data.coupon_result.length;i++)
							{
								that.result.push(res.data.coupon_result[i]);
							}
						}
						console.log(res.data);
						that.merchant = res.data.store_result;
						that.banner   = res.data.imgs;
						// that.result = res.data.result;
					}
				})
			}
		}
	}
</script>